<template>
    <div class="frame-body">
        <div class="container">
            <div class="left-menu">
                <div class="left-menu-stage">
                    <div class="left-menu-scene">
                        <div class="menu-title">
                            <span>项目管理</span>
                        </div>
                        <div class="menu-list">
                            <a-menu style="width: 208px;background-color:#efefef;" :default-selected-keys="['1']" :open-keys.sync="openKeys"
                                    mode="inline" @click="handleClick">
                                <a-menu-item key="sub1" @titleClick="titleClick">
                                    <div class="nav-title">概况</div>
                                </a-menu-item>

                                <a-menu-item key="sub2" @titleClick="titleClick">
                                    <div class="nav-title">回收站</div>
                                </a-menu-item>

                                <a-menu-item key="sub3" @titleClick="titleClick">
                                    <div class="nav-title">待处理事件</div>
                                </a-menu-item>

                                <a-menu-item key="sub4" @titleClick="titleClick">
                                    <div class="nav-title">事件历史记录</div>
                                </a-menu-item>
                            </a-menu>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-container">
                <div class="right-container-stage" v-show="isView==false">
                    <div id="sub-app ">
                        <a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" />
                        <div class="page-body">
                            <a-tabs default-active-key="1" @change="callback" size="small">
                                <a-tab-pane key="1" tab="概览">
                                    <div class="overview">
                                        <div class="dashboard-main">
                                            <div class="todo-center-card" style="display:flex;">
                                                <a-card :loading="demoLoading">
                                                    <div class="card-content">
                                                        <div class="todoCenterCard">

                                                        </div>
                                                    </div>
                                                </a-card>
                                            </div>

                                            <a-card title="我的项目">
                                                <div class="btn_grp" slot="extra">
                                                    <a-dropdown>
                                                        <a-menu slot="overlay" @click="handleMenuClick">
                                                            <a-menu-item key="1">
                                                                1st item
                                                            </a-menu-item>
                                                            <a-menu-item key="2">
                                                                2nd item
                                                            </a-menu-item>
                                                            <a-menu-item key="3">
                                                                3rd item
                                                            </a-menu-item>
                                                        </a-menu>
                                                        <a-button type="link"> 更多操作
                                                            <a-icon type="down" />
                                                        </a-button>
                                                    </a-dropdown>
                                                    <a-button shape="circle" type="link" icon="loading-3-quarters" />
                                                </div>
                                                <div class="card-content">
                                                    <div class="my-project-head">
                                                        <div style="width:70%">
                                                            <a-input-search></a-input-search>
                                                        </div>
                                                        <div style="white-space: nowrap; margin-left: 16px;">
                                                            <a-button type="primary" @click="showDrawer()">
                                                                创建项目
                                                            </a-button>
                                                        </div>
                                                    </div>
                                                    <div class="ingi-list-table">
                                                        <div class="list-table-header">
                                                            <div class="th name"><div class="title">项目名称</div></div>
                                                            <div class="th period"><div class="title">执行周期</div></div>
                                                            <div class="th actions"><div class="title">操作</div></div>
                                                        </div>
                                                        <div class="list-table-body">
                                                            <a-collapse v-model="activeKey" :bordered="false" :accordion="true">
                                                                <template v-for="(item,index) in data">
                                                                    <a-collapse-panel :key="item.id" :showArrow="false">
                                                                        <div slot="header" class="list-table-body-row">
                                                                            <div class="td name"><div class="title">{{item.name}}</div></div>
                                                                            <div class="td period">
                                                                                {{item.cycle}}
                                                                            </div>
                                                                            <div class="td actions">
                                                                                <a-button-group size="small">
                                                                                    <a-button type="link">
                                                                                        查看
                                                                                    </a-button>
                                                                                    <a-button type="link">
                                                                                        编辑
                                                                                    </a-button>
                                                                                </a-button-group>
                                                                            </div>
                                                                        </div>
                                                                        <a-card title="Default size card" style="width: 300px">
                                                                            <a slot="extra" href="#">more</a>
                                                                            <p>card content</p>
                                                                            <p>card content</p>
                                                                            <p>card content</p>
                                                                        </a-card>
                                                                    </a-collapse-panel>
                                                                </template>
                                                            </a-collapse>
                                                        </div>
                                                        <div class="list-table-footer"></div>
                                                    </div>


                                                    <a-pagination v-model="current" :total="total" show-less-items />
                                                    <!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                                                     :data-source="data">
                                                        <span slot="action" slot-scope="text, record">
                                                            <a-button size="small" style="margin-right: 10px;" type="primary">
                                                                审核
                                                            </a-button>
                                                            <a-button size="small" style="margin-right: 10px;" type="danger">
                                                                删除
                                                            </a-button>
                                                            <a-button @click="isView=true" size="small" style="margin-right: 10px;" type="default">
                                                                查看
                                                            </a-button>
                                                        </span>
                                                    </a-table> -->
                                                </div>
                                            </a-card>

                                        </div>
                                        <aside class="dashboard-side">
                                            <a-card title="快速操作"></a-card>
                                            <a-card title="申请与审批"></a-card>
                                            <a-card title="资源库"></a-card>
                                            <a-card title="技术支援"></a-card>
                                        </aside>
                                    </div>
                                </a-tab-pane>
                                <a-tab-pane key="2" tab="资源查看"></a-tab-pane>
                            </a-tabs>
                        </div>
                    </div>
                </div>
                <div class="right-container-stage" v-show="isView">
                    这里是详情
                </div>
            </div>
            <a-drawer title="Create a new account" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }"
                      @close="onClose">
                <a-steps :current="stepCurrent" size="small">
                    <a-step title="基础信息" />
                    <a-step title="补充信息" />
                    <a-step title="验证信息" />
                </a-steps>
                <a-form-model
                        ref="ruleForm"
                        :model="project"
                        :rules="rules"   layout="vertical" hide-required-mark>
                    <div v-show="stepCurrent === 0">
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="项目名称" prop="name">
                                    <a-input v-model="project.name"
                                             placeholder="请输入项目名称" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <!-- :default-value="['a1', 'b2']" -->
                                <a-form-model-item label="项目督导人员" prop="supervisor">
                                    <a-select
                                            mode="multiple"  @change="supervisorChange">
                                        <a-select-option v-for="item in supervisor" :key=" item.id ">
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item label="项目编码" prop="code">
                                    <a-input v-model="project.code"
                                             placeholder="请输入项目编码" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <!-- :default-value="['a1', 'b2']" -->
                                <a-form-model-item label="准入机构行政人员" prop="administrationUser">
                                    <a-select
                                            mode="multiple" @change="administrationChange">
                                        <a-select-option v-for="item in administration" :key=" item.id " >
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="24">
                                <a-form-model-item label="项目周期" prop="cycle">
                                    <a-range-picker v-model="project.cycle"
                                                    :locale="locale"
                                                    format="YYYY-MM-DD"
                                                    :disabled-date="disabledDate"
                                                    show-time
                                                    @change="onChange" >

                                    </a-range-picker>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div v-show="stepCurrent === 1">
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="个人档案数" prop="personalFiles">
                                    <a-input  v-model = "project.personalFiles"
                                              type="number"
                                              placeholder="请输入个人档案数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="个案数" prop="personalCase">
                                    <a-input  v-model="project.personalCase"
                                              type="number"
                                              placeholder="请输入个案数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
                                    <a-input v-model="project.consultServicePerson"
                                             type="number"
                                             placeholder="请输入咨询服务对象数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="咨询次数" prop="consultServiceCount">
                                    <a-input  v-model="project.consultServiceCount"
                                              type="number"
                                              placeholder="请输入咨询次数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
                                    <a-input  v-model="project.longtimeServicePerson"
                                              type="number"
                                              placeholder="请输入长期探访服务对象数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
                                    <a-input v-model="project.longtimeServiceCount"
                                             type="number"
                                             placeholder="请输入长期探访次数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="危机介入数" prop="dangerService">
                                    <a-input  v-model="project.dangerService"
                                              type="number"
                                              placeholder="请输入危机介入数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="24">
                                <a-form-model-item label="项目相关图片">
                                    <a-upload
                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                            list-type="picture-card"
                                            :file-list="fileList"
                                            @preview="handlePreview"
                                            @change="handleChange"
                                    >
                                        <div v-if="fileList.length < 8">
                                            <a-icon type="plus" />
                                            <div class="ant-upload-text">
                                                Upload
                                            </div>
                                        </div>
                                    </a-upload>
                                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                        <img alt="example" style="width: 100%" :src="previewImage" />
                                    </a-modal>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div v-show="stepCurrent === 2">
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <h2>基础信息</h2>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item  label="项目名称" prop="name">
                                    <a-input v-model="project.name"
                                             placeholder="请输入项目名称" />
                                </a-form-model-item >
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="项目编码" prop="code">
                                    <a-input v-model="project.code"
                                             placeholder="请输入项目编码" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="24">
                                <a-form-model-item label="项目周期" prop="cycle">
                                    <a-range-picker v-model="project.cycle"
                                                    :locale="locale"
                                                    format="YYYY-MM-DD"
                                                    show-time
                                                    :disabled-date="disabledDate"
                                                    @change="onChange" >

                                    </a-range-picker>
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <h2>服务指标</h2>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="个人档案数" prop="personalFiles">
                                    <a-input v-model = "project.personalFiles"
                                             type="number"
                                             placeholder="请输入个人档案数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="个案数" prop="personalCase">
                                    <a-input v-model="project.personalCase"
                                             type="number"
                                             placeholder="请输入个案数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
                                    <a-input v-model="project.consultServicePerson"
                                             type="number"
                                             placeholder="请输入咨询服务对象数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="咨询次数" prop="consultServiceCount">
                                    <a-input v-model="project.consultServiceCount"
                                             type="number"
                                             placeholder="请输入咨询次数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
                                    <a-input v-model="project.longtimeServicePerson"
                                             type="number"
                                             placeholder="请输入长期探访服务对象数" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">

                                <a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
                                    <a-input v-model="project.longtimeServiceCount"
                                             type="number"
                                             placeholder="请输入长期探访次数" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">
                                <a-form-model-item label="危机介入数" prop="dangerService">
                                    <a-input v-model="project.dangerService"
                                             type="number"
                                             placeholder="请输入危机介入数" />
                                </a-form-model-item>
                            </a-col>

                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <h2>相关人员</h2>
                        </a-row>

                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="12">

                                <a-form-model-item label="项目督导人员" prop="supervisor">
                                    <a-select v-model="project.supervisor"
                                              mode="multiple"
                                              @change="multiSelectChangge">
                                        <a-select-option v-for="item in supervisor" :key=" item.id ">
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>

                            <a-col :span="12">

                                <a-form-model-item label="准入机构行政人员" prop="administrationUser">
                                    <a-select v-model="project.administrationUser"
                                              mode="multiple" @change="multiSelectChangge">
                                        <a-select-option v-for="item in administration" :key=" item.id " >
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>

                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <h2>相关图片信息</h2>
                        </a-row>
                        <a-row :gutter="16" style="margin-top: 20px;">
                            <a-col :span="24">
                                <a-form-model-item label="项目相关图片">
                                    <a-upload
                                            v-model="project.images"
                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                            list-type="picture-card"
                                            :file-list="fileList"
                                            @preview="handlePreview"
                                            @change="handleChange"
                                    >
                                        <div v-if="fileList.length < 8">
                                            <a-icon type="plus" />
                                            <div class="ant-upload-text">
                                                Upload
                                            </div>
                                        </div>
                                    </a-upload>
                                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                        <img alt="example" style="width: 100%" :src="previewImage" />
                                    </a-modal>
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                    </div>
                </a-form-model>

                <div :style="{
	          position: 'absolute',
	          right: 0,
	          bottom: 0,
	          width: '100%',
	          borderTop: '1px solid #e9e9e9',
	          padding: '10px 16px',
	          background: '#fff',
	          textAlign: 'right',
	          zIndex: 1,
	        }">
                    <a-button :style="{ marginRight: '8px' }" @click="onClose">
                        取消
                    </a-button>
                    <a-button type="primary" v-show="stepCurrent>0"  :style="{ marginRight: '8px' }"  @click="goPre">
                        上一步
                    </a-button>
                    <a-button type="primary" v-show="stepCurrent !== 2"  :style="{ marginRight: '8px' }"  @click="goNext">
                        下一步
                    </a-button>
                    <a-button type="danger" v-show="stepCurrent === 2" @click="onSubmit" >
                        提交
                    </a-button>
                </div>
            </a-drawer>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
    import moment from 'moment';
    import {projectList,
        getSupervisor,
        getAdministration,
        createProject,
        getProjectByRole} from '@/api/list.js'
    function getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    };
    const columns = [{
        title: '项目标题',
        dataIndex: 'name',
    },
        {
            title: '执行周期',
            dataIndex: 'age',
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {
                customRender: 'action'
            },
        },
    ];

    const data = [];
    for (let i = 0; i < 10; i++) {
        if (i == 2) {
            data.push({
                key: i,
                name: `附带子内容的 项目标题 ${i}`,
                age: '2020年5月1日 至 2021年4月25日',
                children: [{
                    key: 211,
                    name: `这是项目里面的第一个社工创建`,
                    age: '个案',
                    address: `2020年八月八日`,
                }, {
                    key: 212,
                    name: `这是项目里面的第二个社工创建`,
                    age: '咨询',
                    address: `2020年八月八日`,
                }]
            });
        } else {
            data.push({
                key: i,
                name: `这是项目标题 ${i}`,
                age: '2020年5月1日 至 2021年4月25日',
            });
        }
    }
    const sourceData = [
        // input基本使用
        {
            title: '输入框',
            dataIndex: 'name',
            width: 200,
            fixed: 'left',
            formOptions: {
                el: 'input',
                allowClear: true
            }
        },
        // input.search
        {
            title: '搜索框',
            dataIndex: 'input2',
            formOptions: {
                el: 'input.search'
            }
        },
        {
            title: '自定义',
            dataIndex: 'input3',
            formOptions: {
                el: 'input'
            }
        },
        // 同步select值
        {
            title: '下拉框',
            className: 'select',
            dataIndex: 'select',
            formOptions: {
                el: 'select',
                options: [{
                    label: 'John Brown',
                    value: 'John Brown',
                    disabled: true
                },
                    {
                        label: 'artiely',
                        value: 'artiely'
                    }
                ]
            }
        },
        // 异步select值
        {
            title: '异步下拉框',
            className: 'selectAsync',
            dataIndex: 'selectAsync',
            formOptions: {
                el: 'select',
                options: []
            }
        },
        {
            title: '输入框',
            dataIndex: 'address',
            formOptions: {
                el: 'input'
            }
        },
        {
            title: '单选框',
            dataIndex: 'radio',
            formOptions: {
                el: 'radio',
                options: [{
                    label: 'John Brown',
                    value: 'John Brown',
                    disabled: true
                },
                    {
                        label: 'artiely',
                        value: 'artiely'
                    }
                ]
            }
        },
        {
            title: '开关',
            dataIndex: 'switch',
            formOptions: {
                el: 'switch',
                checkedChildren: '开',
                unCheckedChildren: '关'
            }
        },
        {
            title: '复选框',
            dataIndex: 'checkbox',
            formOptions: {
                el: 'checkbox',
                options: [{
                    label: 'Apple',
                    value: 'Apple'
                },
                    {
                        label: 'Pear',
                        value: 'Pear'
                    },
                    {
                        label: 'Orange',
                        value: 'Orange'
                    }
                ]
            }
        },
        {
            title: '日期',
            dataIndex: 'datepicker',
            formOptions: {
                el: 'datepicker',
                options: {}
            }
        },
        {
            title: '时间',
            dataIndex: 'timepicker',
            formOptions: {
                el: 'timepicker',
                options: {}
            }
        },
        {
            title: '级联',
            dataIndex: 'cascader',
            formOptions: {
                el: 'cascader',
                options: [{
                    value: 'zhejiang',
                    label: 'Zhejiang',
                    children: [{
                        value: 'hangzhou',
                        label: 'Hangzhou',
                        children: [{
                            value: 'xihu',
                            label: 'West Lake'
                        }]
                    }]
                }, {
                    value: 'jiangsu',
                    label: 'Jiangsu',
                    children: [{
                        value: 'nanjing',
                        label: 'Nanjing',
                        children: [{
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men'
                        }]
                    }]
                }]
            }
        },
        {
            title: '星级',
            dataIndex: 'rate',
            formOptions: {
                el: 'rate'
            }
        },
        {
            title: '文本域',
            dataIndex: 'textarea',
            formOptions: {
                el: 'textarea'
            }
        },
        {
            title: '滑块',
            dataIndex: 'slider',
            formOptions: {
                el: 'slider'
            }
        },
        {
            title: '上传',
            dataIndex: 'upload',
            formOptions: {
                el: 'upload',
                // 上传地址
                action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76'
            }
        },
        {
            title: '树',
            dataIndex: 'tree',
            formOptions: {
                el: 'tree',
                options: [{
                    title: 'parent 1',
                    key: '0-0',
                    slots: {
                        icon: 'smile'
                    },
                    children: [{
                        title: 'leaf',
                        key: '0-0-0',
                        slots: {
                            icon: 'meh'
                        }
                    },
                        {
                            title: 'leaf',
                            key: '0-0-1',
                            scopedSlots: {
                                icon: 'custom'
                            }
                        }
                    ]
                }]
            }
        }
    ]
    const layout = Vue.observable({
        // 响应式断点设置
        breakPoint: 'lg',
        // 是否小屏
        isMobile: false,
        // 菜单是否折叠
        isCollapse: false,
        // 布局模式 flow fixed
        layoutMode: 'flow',
        // 当前选择的布局
        layoutShap: 'layout1',
        // 是否展示标签页
        isNavTabs: true,
        // 菜单的主题
        menuTheme: 'dark',
        // 默认字体大小(不建议修改)
        fontSize: 16,
        // 菜单折叠的宽度
        collapsedWidth: 80,
        //  菜单的宽度
        menuWidth: 240,
        //  刷新当前页使用
        homeReload: true,
        // 这个应用重置
        appReload: true,
        // 标签页的高度
        navTabsHeight: 45,
        // 标签页的样式
        navTabsShap: 'card',
        // 头部的高度
        headerHeight: 64,
        // 菜单收起的动画和时间
        layoutTransition: 'all 0.2s'
    });
    export default {
        data() {
            return {
                demoLoading: true,
                current: 1,
                openKeys: ['sub1'],
                data,
                columns,
                sourceData,
                isView:false,
                form: this.$form.createForm(this),
                visible: false,
                start: '',
                selectedRowKeys: [], // Check here to configure the default column
                loading: false,
                activeKey:[],
                defaultData: {
                    name: '这是一个基本输入框',
                    input2: '这是一个搜索输入框',
                    input3: '这是一个完全自定义的输入框',
                    select: '这是一个基本输入框',
                    selectAsync: '这是一个异步数据输入框',
                    address: 'New York No. 1 Lake Park',
                    radio: 'artiely',
                    switch: true,
                    checkbox: [],
                    datepicker: '2019/10/20',
                    timepicker: '23:59:59',
                    cascader: ['zhejiang', 'hangzhou', 'xihu'],
                    rate: 3,
                    textarea: '这是一个文本域',
                    slider: 30,
                    upload: [{
                        uid: '-1',
                        name: 'xxx.png',
                        status: 'done',
                        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
                    }],
                    tree: []
                },
                listQurey:{
                    page:1,
                    size:10
                },
                total:0,
                stepCurrent:0,
                previewVisible: false,
                previewImage: '',
                fileList: [
                    // {
                    //   uid: '-1',
                    //   name: 'image.png',
                    //   status: 'done',
                    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                    // },
                    // {
                    //   uid: '-2',
                    //   name: 'image.png',
                    //   status: 'done',
                    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                    // }
                ],
                supervisor:[],
                administration:[],
                rules: {
                    name: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度为3到50个字符', trigger: 'blur' },
                    ],
                    code:[
                        { required: true, message: '请输入项目编码', trigger: 'blur' },
                    ],
                    cycle:[
                        { required: true, message: '请选择项目周期', trigger: 'blur' },
                    ],
                    personalCase:[
                        { required: true, message: '请输入个案数', trigger: 'blur' },
                    ],
                    personalFiles:[
                        { required: true, message: '请输入个人档案数', trigger: 'blur' },
                    ],
                    consultServicePerson:[
                        { required: true, message: '请输入咨询服务对象数', trigger: 'blur' },
                    ],
                    consultServiceCount:[
                        { required: true, message: '请输入咨询次数', trigger: 'blur' },
                    ],
                    longtimeServicePerson:[
                        { required: true, message: '请输入长期服务对象数', trigger: 'blur' },
                    ],
                    longtimeServiceCount:[
                        { required: true, message: '请输入长期服务次数', trigger: 'blur' },
                    ],
                    dangerService:[
                        { required: true, message: '请输入危机介入数', trigger: 'blur' },
                    ],
                    supervisor:[
                        { required: true, message: '请选择项目督导', trigger: 'blur' },
                    ],
                    administrationUser:[
                        { required: true, message: '请选择准入机构行政人员', trigger: 'blur' },
                    ],
                },
                project:{

                },
                locale,
                dateRange:''

            };
        },
        watch: {
            openKeys(val) {
                console.log('openKeys', val);
            },
        },
        computed: {
            hasSelected() {
                return this.selectedRowKeys.length > 0;
            },
        },
        created () {
            // 测试获取用户
            // console.log("test");
            // const user =JSON.parse(localStorage.getItem('user'));
            // console.log(user);
            // 测试获取用户选择登录的角色
            // 角色id对应的角色说明在README文件中
            // console.log(localStorage.getItem('roleId'));
            this.getProject();
            this.getSupervisorAndAdmin();
        },
        methods: {
            callback(){},
            handleMenuClick(){},
            showDrawer() {
                // 设置只有机构管理员能够创建项目,存入localStorage里取出来的是字符串
                if(localStorage.getItem('roleId') === '46' ){
                    this.visible = true;
                }else{

                    this.$notification.error({
                        message: '无创建项目权限',
                        description: `您当前登录的角色不是机构管理员，不能创建项目`
                    })
                }

            },
            onClose() {
                this.$refs.ruleForm.resetFields();
                this.stepCurrent = 0;
                this.visible = false;
            },
            onSubmit(){
                console.log(this.project);
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {

                        delete this.project.cycle; // 直接赋值的话，控制台报错太难看
                        this.project.cycle=this.dateRange;
                        createProject(this.project)
                            .then(res =>{
                                if(res.code==200){
                                    this.visible = false;
                                    this.$notification.success({
                                        message: 'success',
                                        description: `项目创建成功`
                                    })
                                    this.getProject();
                                }else{
                                    this.visible = false;
                                    this.$notification.error({
                                        message: 'erroe',
                                        description: `创建失败，服务器异常`
                                    })
                                }
                            })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleClick(e) {
                console.log('click', e);
            },
            titleClick(e) {
                console.log('titleClick', e);
            },
            onSelectChange(selectedRowKeys) {
                console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
            getProject(){
                if(localStorage.getItem('roleId') === '46'){
                    projectList(this.listQurey)
                        .then( res =>{
                            console.log(res.data.records);
                            this.data=res.data.records;
                            this.total=res.data.total;
                        })
                }else{
                    // 非机构管理员时
                    const parameter={
                        id: JSON.parse(localStorage.getItem('user')).id,
                        roleId: localStorage.getItem('roleId')
                    };
                    getProjectByRole(parameter)
                        .then( res =>{
                            this.data=res.data;
                            this.total=res.data.length;
                            if(res.data.length ===0){
                                this.$notification.error({
                                    message: '无关联的项目',
                                    description: `您当前登录的角色没有关联的项目`
                                })
                            }
                        })

                }

            },
            goNext(){
                this.stepCurrent = this.stepCurrent + 1;
            },
            goPre(){
                this.stepCurrent = this.stepCurrent - 1;
            },
            handleCancel() {
                this.previewVisible = false;
            },
            async handlePreview(file) {
                if (!file.url && !file.preview) {
                    file.preview = await getBase64(file.originFileObj);
                }
                this.previewImage = file.url || file.preview;
                this.previewVisible = true;
            },
            handleChange({ fileList }) {
                this.fileList = fileList;
                console.log(fileList)
                // this.ingi-project.images=[];
                // for(var i=0;i<fileList.length;i++){
                //  this.ingi-project.images.push(fileList[i].url)
                // }
            },
            multiSelectChangge(value){
                console.log(value);
            },
            supervisorChange(value){
                this.project.supervisor=value;
            },
            administrationChange(value){
                this.project.administrationUser=value;
            },
            // 获取可选的项目督导和准入机构行政人员
            getSupervisorAndAdmin(){
                getSupervisor()
                    .then(res =>{
                        this.supervisor= res.data
                    });

                getAdministration()
                    .then(res =>{
                        this.administration = res.data
                    });
            },
            // 时间范围选择改变
            onChange(date, dateString) {
                // console.log(date, dateString);
                console.log(dateString) // 这里时两个时间格式化的字符串组成的数组
                this.dateRange=dateString[0]+'至'+ dateString[1]
                console.log(this.dateRange)
            },
            disabledDate(current) {
                // Can not select days before today and today
                return current && current <= moment().endOf('day');
            }


        },
    };
</script>
